import { 
    FishProvider,
    tokens,
    webLightTheme,
    teamsLightTheme,
    teamsDarkTheme,
    webDarkTheme,
    teamsHighContrastTheme, 
} from "fish-ui-yy"
import { makeStyles } from "@griffel/react"
const useStyles = makeStyles({
    provider:{
        border: "1px",
        borderRadius: "5px",
        padding: "5px",
    },
    text:{
        backgroundColor: tokens.colorBrandBackground2,
        color: tokens.colorBrandForeground2,
        fontSize: "20px",
        border: "1px",
        borderRadius: "5px",
        padding: "5px",
    }
})

export const Default = ()=>{
    const styles = useStyles()
    return (
        <>
        <div>
            <FishProvider className={styles.provider} theme={webLightTheme}>
                <div className={styles.text}>webLightTheme</div>
            </FishProvider>
        </div>
        <div>
            <FishProvider className={styles.provider} theme={teamsLightTheme}>
                <div className={styles.text}>teamsLightTheme</div>
            </FishProvider>
        </div>
        <div>
            <FishProvider className={styles.provider} theme={teamsDarkTheme}>
                <div className={styles.text}>teamsDarkTheme</div>
            </FishProvider>
        </div>
        <div>
            <FishProvider className={styles.provider} theme={webDarkTheme}>
                <div className={styles.text}>webDarkTheme</div>
            </FishProvider>
        </div>
        <div>
            <FishProvider className={styles.provider} theme={teamsHighContrastTheme}>
                <div className={styles.text}>teamsHighContrastTheme</div>
            </FishProvider>
        </div>
        </>
    )
}